
<div class="layui-form" style="margin: 16px">
    <div class="row">
        <!--<div class="layui-row">-->
        <!--&lt;!&ndash;筛选条件&ndash;&gt;-->
        <!--<div class="layui-col-xs6">-->
        <!--<form class="layui-form" action="">-->
        <!--<div class="layui-inline">-->
        <!--<div class="layui-input-inline date-width-300">-->
        <!--<input type="text" class="layui-input" id="search_date" placeholder="开始 到 结束">-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="layui-inline">-->
        <!--<div class="layui-input-inline date-width-300">-->
        <!--<a style="margin-left: 10px" href="#">高级搜索</a>-->
        <!--</div>-->
        <!--</div>-->
        <!--</form>-->
        <!--</div>-->
        <!--</div>-->
        <!--//库存数据表格-->
        <table class="layui-hide" id="inventory_table" lay-filter="inventory1" ></table>

        <!--<script type="text/html" id="barDemo">-->
        <!--<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
        <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
        <!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="recode">记录</a>-->
        <!--</script>-->

        <script type="text/html" id="toolbar_inventory">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">确认</button>
                <!--<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
                <!--<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
            </div>
        </script>
    </div>
</div>
<!--<div class="layui-form-item">-->
<!--<div class="layui-input-block" style="text-align: center">-->
<!--<button type="submit" class="layui-btn" lay-submit="" lay-filter="addData">立即提交</button>-->
<!--</div>-->
<!--</div>-->
<div id="check_data"></div>
<script>
    layui.use(['table', 'laydate','form'], function () {
        var table = layui.table;
        var laydate = layui.laydate;
        var layer = layui.layer;
        var form = layui.form;
        //日期
        laydate.render({
            elem: '#search_date'
            , type: 'datetime'
            , range: '到'
            , format: 'yyyy年M月d日'
        });
        //方法级渲染
        var tableIns = table.render({
            elem: '#inventory_table'
            ,url: '{:url("/printer/Inventory/getData")}'
            ,toolbar: '#toolbar_inventory' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: false
            ,cols: [[
                {checkbox: true, fixed: true}
                ,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
                ,{field:'print_type', title: '打印机型号', }
                ,{field:'consumable_type', title: '耗材型号',}
                ,{field:'page_num', title: '打印页数'}
                ,{field:'price', title: '单价', sort: true, }
                ,{field:'num', title: '库存', sort: true, }
                ,{field:'create_time', title: '创建时间'}
                ,{field:'buy_num', title:'下单数量', width:150,edit: 'text', }
                ,{field:'comment', title: '备注',}
            ]]
            ,page: true
        });
        //头工具栏事件
        table.on('toolbar(inventory1)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;

                    $('#check_data').html(JSON.stringify(data));
                    return false;
//                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });


    });
</script>